<template>
    <div>
        <div class="btn mb-15" v-if="indexCode == 'cm'">
            <el-button
                type="primary"
                :loading="downloading"
                @click="downloadFile"
                >下载</el-button
            >
        </div>
        <div class="echart-h" id="tempManage"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapState } from 'vuex';
import { getTemplateMaintenance } from '@/api/cockpit';
export default {
    name: 'TempManageEchart',
    props: {
        manageType: {
            required: true,
            type: String,
            default: ''
        }
    },
    data () {
        return {
            myChart: null,
            downloading: false
        };
    },
    computed: {
        ...mapState({
            indexCode: state => state.cockpit.indexCode,
            code: state => state.cockpit.code,
            year: state => state.cockpit.year
        })
    },
    created () {
        // this.init()
        // console.log(this.indexCode, this.year, 'indexCode===');
    },
    mounted () {
        this.initEchart();
    },
    methods: {
        initEchart () {
            var chartDom = document.getElementById('tempManage');
            var myChart = echarts.init(chartDom);
            this.common.load(myChart);
            getTemplateMaintenance({
                year: this.year,
                indexCode: this.indexCode || 'zlzx',
                code: this.code
            }).then(res => {
                console.log(res, 'res');
                var option;
                option = { ...this.common.barOption };
                option.title.text = '模板数';
                option.tooltip.formatter = (params) => {
                    // console.log(params, 'tool');
                    // ${this.common.totalEle} 总数 ${Number(params[0].data) + Number(params[1].data)}个<br>
                    return this.common.formatVal(params, '个')
                };
                option.xAxis[0].data = res.names || [];
                option.xAxis[0].axisLabel = {
                    interval: 0,
                    formatter: (params) => {
                       return this.common.formatterAxisLabel(params)
                    }
                };
                option.yAxis[0].name = '单位/(个)';
                option.yAxis[0].axisLabel = {
                    formatter: '{value} 个'
                };
                const nameArr = ['已下发', '未编辑'];
                const datas = res.values || [];
                option.legend.data = nameArr;
                option.series = [];
                for (let i = 0; i < datas.length; i++) {
                    option.series.push({
                        name: nameArr[i],
                        type: 'bar',
                        barWidth: '50px',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: datas[i]
                    });
                }
                // 1、清除画布
                myChart.clear();
                myChart.hideLoading();
                // 2、调用setOption
                option && myChart.setOption(option);
            });
            // 3、在渲染点击事件之前先清除点击事件
            myChart.off('click');
            // triggerEvent为true时，触发点击事件
            myChart.on('click', async params => {
                if (this.indexCode === 'cm') return;
                console.log(params, params.seriesName, 'pathid');
                const state = params.seriesName === '未编辑' ? 0 : 1;
                let indexX;
                if (params.name === '学校层') {
                    indexX = 'XT_WH_XX';
                }
                if (params.name === '专业层') {
                    indexX = 'XT_WH_ZY';
                }
                if (params.name === '课程层') {
                    indexX = 'XT_WH_KC';
                }
                if (params.name === '教师层') {
                    indexX = 'XT_WH_JS';
                }
                if (params.name === '学生层') {
                    indexX = 'XT_WH_XS';
                }

                await this.$emit(
                    'handleSearch',
                    { indexX, state },
                    'echart',
                    this.manageType
                );
            });
        },
        downloadFile () {
            this.downloading = true;
            this.$emit('downloadFile');
        }
    }
};
</script>
<style lang="scss" scoped>
.btn {
    text-align: right;
}
</style>
